<template>
    <div class="by-gongzuo">
        <section class="header" @click="centerDialogVisible = true">
            <i class="iconfont icon-xinzeng"></i>更换备件
        </section>
        <section>
            <div class="list" v-for="item in partsList" :key="item.value">
                <p>备件名称：{{item.partsName}}</p>
                <p>备件参数：{{item.partsParameter}}</p>
                <p>备件数量：{{item.partsNum}}</p>
                <p>备件单位：{{item.partsUnit}}</p>
                <p>备件备注：{{item.remark}}</p>
            </div>
        </section>
        <el-dialog title="更换备件" :visible.sync="centerDialogVisible" width="90%" center>
            <div class="dialogBox">
                <div><span>备件名称：</span><input type="text" v-model="form.partsName"></div>
                <div><span>备件参数：</span><input type="text" v-model="form.partsParameter"></div>
                <div><span>备件数量：</span><input type="text" v-model="form.partsNum" onkeyup="value=value.replace(/[^\d]/g,'')"></div>
                <div><span>备件单位：</span><input type="text" v-model="form.partsUnit"></div>
                <div><span>备件备注：</span><textarea type="text" v-model="form.remark"></textarea></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMainParts()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <button type="button" class="btn btn-block btn-primary" @click="commit">提交</button> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            centerDialogVisible: false,
            form: {
                planId:this.$route.query.id,
                partsName: "",
                partsParameter: "",
                partsNum: "",
                partsUnit: "",
                remark: "",
            },
            partsList: []
        };
    },
    mounted() {
        this.getParts()
    },
    methods: {
        stopFocus() {
            document.activeElement.blur();
        },
        //添加备件
        addMainParts() {
            this.$api.weixiu.addRepoirParts(this.form).then(res => {
                if (res.success) {
                    this.centerDialogVisible = false
                    this.getParts()
                    this.$$tip({
                        content: '添加成功'
                    })
                    this.form.partsName=""
                    this.form.partsParameter=""
                    this.form.partsNum=""
                    this.form.partsUnit=""
                    this.form.remark=""
                }
            });
        },
        //备件列表
        getParts() {
            this.$api.weixiu.selRepoirParts({
                planId:this.$route.query.id
            }).then(res => {
                if (res.success) {
                    this.partsList = res.data
                }
            });
        }
    }
};
</script>

<style>
</style>
